<template>
  <div :style="style">
    <n-image :width="size" :preview-disabled="true" :src="src" />
    <div
      class="identification"
      :class="state.toLowerCase()"
      :style="style2"></div>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    size: number;
    src?: string;
    state: "OFFLINE" | "ONLINE" | "INVISIBLE";
  }>(),
  {
    src: "/src/assets/icon/moren.png",
  }
);
const style = computed(() => {
  return [{ height: props.size + "px" }, { width: props.size + "px" }];
});
const style2 = computed(() => {
  let number = props.size * 0.3;
  return {
    height: number + "px",
    width: number + "px",
  };
});
</script>

<style scoped>
div {
  position: relative;
}

.n-image {
  border-radius: 999px;
}

.identification {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  border-radius: 20px;
}

.offline,
.invisible {
  background-color: #a9a9a9;
  border: 1px solid #eaeaea;
}

.online {
  background-color: #12d032;
  border: 1px solid #eaeaea;
}
</style>
